<template>
	<view class="search"
		:style="[{ backgroundColor: backgroundColor }, { width: lineWidth + 'rpx' }, { height: lineHeight + 'rpx' }]">
		<image src="https://www.worldintek.com:39011/yaolexue-service/icon_search.png" class="w-36 h-36"></image>
		<input :style="{ color: placTextColor }" :value="value" @input="inputInput" @confirm="confirmSearch"
			:placeholder="placText" :placeholder-style="placStyle" class="search-input" />
	</view>
</template>

<script>
export default {
	name: "t-search",
	props: {
		value: {
			type: String,
			default: ''
		},
		placText: {
			type: String,
			default: ''
		},
		backgroundColor: {
			type: String,
			default: 'rgba(255,255,255,0.2)'
		},
		placTextColor: {
			type: String,
			default: '#FFFFFF'
		},
		placStyle: {
			type: String,
			default:()=>{
        return 'color: #ffffff;font-size: 28rpx'
      }
		},
		lineWidth: {
			type: String,
			default: '689'
		},
		lineHeight: {
			type: String,
			default: '70'
		}
	},
	data() {
		return {

		};
	},
	methods: {
		searchClick() {
			this.$emit('searchClick')
		},
		inputInput(e) {
			console.log(e)
			console.log(e.detail.value)
			this.$emit('input', e.detail.value)

		},
		confirmSearch() {
			this.$emit('confirm', this.value)
		},
		handleLink() {
			const pages = getCurrentPages()
			const currentRoute = pages[pages.length - 1].route
			let type;
			if (currentRoute === 'pages/MedicalAudio/MedicalAudio') {
				type = 5
			} else if (currentRoute === 'pages/MedicalVideo/MedicalVideo') {
				type = 4
			} else if (currentRoute === 'pages/MedicalArticle/MedicalArticle') {
				type = 3
			}
			uni.navigateTo({
				url: `/pages/my/my?type=${type}`
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.search {
	// margin-top: 37rpx;
	width: 689rpx;
	height: 70rpx;
	border-radius: 35rpx;
	display: flex;
	align-items: center;
	padding: 0 18rpx;

	.search-input {
		font-size: 26rpx;
		height: 100%;
		padding-left: 18rpx;
		width: 100%;
		flex: 1;
	}

	.search-place {
		color: red;
		font-size: 28rpx;
	}
}
</style>